<template>
    <div>
        <Form :model="formItem" inline>
            <FormItem>
                <Input v-model="formItem.company" placeholder="单位"></Input>
            </FormItem>
            <FormItem>
                <Input v-model="formItem.fuel" placeholder="油量"></Input>
            </FormItem>
            <FormItem>
                <Button type="success" @click="search">搜索</Button>
            </FormItem>
            <FormItem>
                <Button type="primary" @click="exportData">导出</Button>
            </FormItem>
        </Form>
        <Table border :columns="columns12" :data="data6" ref="table">
            <template slot-scope="{ row }" slot="fuel">
                <strong >{{ row.fuel }}</strong>
            </template>
        </Table>
        <Row type="flex" justify="end" style="margin-top: 25px">
            <Page :total="total" show-total  @on-change="pageAction" />
        </Row>
    </div>
</template>

<script>
import { getSpvTransactionsByFuelList } from '@/api/user'
export default {
  data () {
    return {
      formItem: {
        fuel: '',
        company: ''
      },
      modal2: false,
      value7: '',
      value: '',
      value1: '',
      value2: ['2016-01-01', '2016-02-15'],
      columns12: [
        {
          title: '交易流水号',
          key: 'batch_number',
          align: 'center'
        },
        {
          title: '金额',
          key: 'money',
          align: 'center'
        },
        {
          title: '油量',
          key: 'fuel',
          slot: 'fuel',
          align: 'center'
        },
        {
          title: '交易类型',
          key: 'transaction_type',
          align: 'center'
        },
        {
          title: '交易状态',
          key: 'transaction_status',
          align: 'center'
        },
        {
          title: '卡号/客户编号',
          key: 'card_num',
          align: 'center'
        },
        {
          title: '客户名称',
          key: 'name',
          align: 'center'
        },
        {
          title: '商品种类',
          key: 'type',
          align: 'center'
        },
        {
          title: '受理机构',
          key: 'acceptance_organization',
          align: 'center'
        },
        {
          title: '业务日期',
          key: 'business_time',
          align: 'center'
        },
        {
          title: '交易时间',
          key: 'transaction_time',
          align: 'center'
        },
        {
          title: '单位',
          key: 'company',
          align: 'center'
        },
        {
          title: '石油公司',
          key: 'oil_companies',
          align: 'center'
        }
      ],
      data6: [],
      total: 0
    }
  },
  methods: {
    async init (data) {
      getSpvTransactionsByFuelList(data).then(ret => {
        this.data6 = ret.data.data.results
        this.total = ret.data.data.totalRecord
      })
    },
    search () {
      const data = {
        fuel: parseInt(this.formItem.fuel),
        company: this.formItem.company
      }
      this.init(data)
    },
    pageAction (current) {
      getSpvTransactionsByFuelList({ fuel: parseInt(this.formItem.fuel), company: this.formItem.company, pageNo: current }).then(ret => {
        this.data6 = ret.data.data.results
      })
    },
    exportData () {
      this.$router.push({
        name: 'cl'
      })
    }
  },
  mounted () {
    this.init()
  }
}
</script>

<style scoped>
    .ivu-table .demo-table-info-cell-name {
        background-color: #2db7f5;
        color: #fff;
    }
</style>
